/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

import styled from 'styled-components';

export const SelectLayout = styled.div`
  width: 100%;
  .select {
    display: flex;
    flex-direction: column;
    margin: 10px 0px;
    background: rgba(91, 95, 199, 0.1);
    width: 100%;
    border: none;
    border-radius: 4px;
    cursor: cell;
    padding-left: 0.5em;
    padding: 4px 12px 12px;
    .body {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .placeholder {
      color: #a2a2a2;
    }
    .close-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: none;
      outline: none;
      cursor: pointer;
      background: none;

      &:hover {
        background: #ccc;
      }
      &:focus {
        border-color: grey;
        border-style: dashed;
        border-width: 1px;
      }
    }
  }
  .active {
    outline: rgb(91, 95, 199) solid 1.5px;
  }
`
